<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>超市账单管理系统</title>
    <link rel="stylesheet" href="/statics/css/public.css"/>
    <link rel="stylesheet" href="/statics/css/style.css"/>
    <script type="text/javascript" src="/statics/js/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            $.ajax({
                type:"get",
                url:"/sys/role/queryAll",
                success:function (result) {
                    $("#role").append("<option value='-1'>---请选择---</option>");
                    $.each(result,function (index,r) {
                        $("#role").append("<option value='"+r.id+"'>"+r.roleName+"</option>");
                    });
                }
            });
            //失去焦点出发事件
            $("#userCode").blur(function () {
                //验证用户编码是否重复
                var userCode=$(this).val();
                //ajax请求
                $.get("/sys/user/queryByUserCode","userCode="+userCode,function (result) {
                    if(result=='error'){
                        //用户编码重复
                        $("#userCode").next().html("用户编码重复，请重新设置");
                        //重新获取焦点
                        $("#userCode").focus();
                    } else{
                        //用户编码不重复
                        $("#userCode").next().html("<img src='/statics/img/xg.png'>");
                    }
                })
            });
            //保存按钮单击事件
            $("#saveButton").click(function () {
                //格式验证，通过则提交用户信息，否则不提交
                if (check()){
                    var data = $("form").serialize();
                    $.post("/sys/user/save",data,function (result) {
                        if (result=="error2"){
                            //登录超时
                            alert("登录超时，请重新登录");
                            location.href="/sys/user/toLogin";
                        }else if(result=="error"){
                            alert("添加失败，请稍后再试");
                        }else {
                            alert("添加成功");
                            location.href="/sys/user/toList";
                        }
                    });
                }
            })
        });
        function check() {
            //用户名必填
            var userName=$("#userName").val();
            if(userName==''){
                $("#userName").next().html("请输入用户名");
                return false;
            }else{
                $("#userName").next().html("√");
            }
            //密码长度
            var userPassword = $("#userPassword").val();
            if(userPassword.length<6 ||userPassword.length>20) {
                $("#userPassword").next().html("用户密码格式错误");
                return false;
            }else{
                $("#userPassword").next().html("√");
            }
            //确认密码是否与密码一致
            var userRe=$("#userRemi").val();
            if(userRe==userPassword) {
                $("#userRemi").next().html("√");
            }else {
                $("#userRemi").next().html("密码不一致");
                return false;
            }
            //出生日期必填
            var birthday=$("#birthday").val();
            if(birthday==''){
                $("#birthday").next().html("请输入生日");
                return false;
            }else{
                $("#birthday").next().html("√");
            }

            //电话必填
            var phone=$("#phone").val();
            if(phone==''){
                $("#phone").next().html("请输入电话");
                return false;
            }else{
                $("#phone").next().html("√");
            }
            return true;
        }
    </script>
</head>
<body>
    <section class="publicMian ">
        <div class="right">
            <div class="location">
                <strong>你现在所在的位置是:</strong>
                <span>用户管理页面 >> 用户添加页面</span>
            </div>
            <div class="providerAdd">
                <form>
                    <!--div的class 为error是验证错误，ok是验证成功-->
                    <div class="">
                        <label for="userCode">用户编码：</label>
                        <input type="text" name="userCode" id="userCode"/>
                        <span>*请输入用户编码，且不能重复</span>
                    </div>
                    <div>
                        <label for="userName">用户名称：</label>
                        <input type="text" name="userName" id="userName"/>
                        <span >*请输入用户名称</span>
                    </div>
                    <div>
                        <label for="userPassword">用户密码：</label>
                        <input type="password" name="userPassword" id="userPassword"/>
                        <span>*密码长度必须大于6位小于20位</span>

                    </div>
                    <div>
                        <label for="userRemi">确认密码：</label>
                        <input type="password" name="userRemi" id="userRemi"/>
                        <span>*请输入确认密码</span>
                    </div>
                    <div>
                        <label >用户性别：</label>

                        <select name="gender">
                            <option value="2">男</option>
                            <option value="1">女</option>
                        </select>
                        <span></span>
                    </div>
                    <div>
                        <label for="birthday">出生日期：</label>
                        <input type="date" name="birthday" id="birthday"/>
                        <span >*</span>
                    </div>
                    <div>
                        <label for="phone">用户电话：</label>
                        <input type="text" name="phone" id="phone"/>
                        <span >*</span>
                    </div>
                    <div>
                        <label for="address">用户地址：</label>
                        <input type="text" name="address" id="address"/>
                    </div>
                    <div>
                        <label >用户类别：</label>
                        <select id="role" name="userRole"></select>

                    </div>
                    <div class="providerAddBtn">
                        <!--<a href="#">保存</a>-->
                        <!--<a href="userList.html">返回</a>-->
                        <input type="button" value="保存" id="saveButton"/>
                        <input type="button" value="返回" onclick="history.back(-1)"/>
                    </div>
                </form>
            </div>

        </div>
    </section>
</body>
</html>
